<template>
	<view class="content padding" style="background-color: #FFFFFF;">
		<view class="refund_item">
			<view class="refund_item_text">货物状态<view style="color:#FE0036">*</view>
			</view>
			<view class="refund_item_input">{{status}}</view>
		</view>
		<view class="refund_item">
			<view class="refund_item_text">退款金额<view style="color:#FE0036">*</view>
			</view>
			<view class="refund_item_input">{{amount}}</view>
		</view>
		<view class="refund_item">
			<view class="refund_item_text">退款原因<view style="color:#FE0036">*</view>
			</view>
			<view class="refund_item_input right" @tap="show()">
				<view style="color: #555555;">{{value}}</view>
				<uni-icon type="arrowdown"></uni-icon>
			</view>
		</view>
		<view class="refund_item">
			<view class="refund_item_text">退款方式</view>
			<view class="refund_item_text2">原路退回 (1-3个工作日退回支付方)</view>
		</view>

		<view class="bt_red" @tap="submit">提交</view>
		<view class="mask" v-if="active" @tap="hidden()"></view>
		<view :class="[active?'poupup_view_':'poupup_view']">
			<view class="poupup_del_view">
				<uni-icon @tap="hidden()" class="poupup_del" type="closeempty" size="30" color="#555555"></uni-icon>
			</view>
			<view class="poupup_title">
				退款原因
			</view>
			<radio-group @change="getValue">
				<view class="poupup_item" v-for="item in options" :key="item.id">
					<view class="poupup_label">{{item.name}}</view>
					<radio :value="item.name" color="#FE0036" style="transform:scale(0.7)"></radio>
				</view>
			</radio-group>

			<view class="bt_red" @tap="hidden()">确定</view>

		</view>
	</view>
</template>

<script>
	import uniIcon from '../../components/uni-icon.vue';
	import api from "../../common/api.js"
	import {
		getWithParam_
	} from "../../common/request.js";
	export default {
		data() {
			return {
				status: "",
				active: false,
				amount: 0.00,
				orderId: 0,
				value: '',
				options: [{
					id: 1,
					name: "拍错,拍多,不想买"
				}, {
					id: 2,
					name: "和商家协商一致退款"
				}, {
					id: 3,
					name: "缺货"
				}, {
					id: 4,
					name: "未按约定时间发货"
				}, {
					id: 5,
					name: "其他原因"
				}]
			}
		},
		components: {
			uniIcon
		},
		onLoad(option) {
			this.amount = option.amount
			this.orderId = option.id
			if (option.status == 1) {
				this.status = "未发货"
			}
			if (option.status == 2) {
				this.status = "已发货"
			}
			if (option.status == 3) {
				this.status = "已收货"
			}
		},
		methods: {
			submit() {
				if (this.value == '') {
					uni.showToast({
						icon: "none",
						message: "请选择"
					})
					return
				}
				getWithParam_(api.ORDER_APPLY_REFUND, {
					orderId: this.orderId,
					reason: this.value
				}).then(res=>{
					
				})
			},
			getValue(e) {
				this.value = e.detail.value
			},
			hidden() {
				this.active = false
			},
			show() {
				this.active = true
			}
		}

	}
</script>

<style>
	.bt_red {
		margin-top: 50upx;
		width: 100%;
		height: 70upx;
		border-radius: 50upx;
		background-color: #FE0036;
		color: #FFFFFF;
		font-size: 30upx;
		align-items: center;
		justify-content: center;
	}

	.poupup_label {
		color: #555555;
	}

	.poupup_item {
		justify-content: space-between;
		align-items: center;
		height: 100upx;
		border-bottom: 0.5px solid #F2F6FC;
	}

	.poupup_del_view {
		width: 100%;
		position: relative;
	}

	.poupup_del {
		position: absolute;
		top: 0;
		right: 0;
	}

	.poupup_title {
		justify-content: center;
		font-size: 32upx;
		color: #333333;
		padding: 20upx 0 50upx 0;
	}

	.poupup_view {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		border-top-right-radius: 20upx;
		border-top-left-radius: 20upx;
		z-index: 200;
		flex-direction: column;
		padding: 0 30upx 60upx 30upx;
		box-sizing: border-box;
		transition: all 0.3s ease;
		transform: translateY(100%);
	}

	.poupup_view_ {
		width: 100%;
		position: fixed;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
		border-top-right-radius: 20upx;
		border-top-left-radius: 20upx;
		z-index: 200;
		flex-direction: column;
		padding: 0 30upx 60upx 30upx;
		box-sizing: border-box;
		transition: all 0.3s ease;
		transform: translateY(0);
	}

	.refund_item_text2 {
		margin-top: 20upx;
		padding-left: 30upx;
		color: #888888;
	}

	.right {
		justify-content: space-between;
		padding-right: 30upx;
	}

	.refund_item {
		flex-direction: column;
		padding: 20upx 0;
	}

	.refund_item_text {
		font-size: 30upx;
		color: #333333;
	}

	.refund_item_input {
		margin-top: 20upx;
		width: 100%;
		height: 70upx;
		border-radius: 50upx;
		background-color: #F1F1F1;
		color: #555555;
		align-items: center;
		padding-left: 40upx;
		box-sizing: border-box;
	}
</style>
